<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>姓名案例_methods实现</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
    姓：<input type="text" v-model="first_name" placeholder=""><br/>
    名：<input type="text" v-model="last_name" placeholder=""><br/>
    <!-- 指令里面加不加()可以，但是插值语法不行，不加会把函数打印出来 -->
    <span>全名：{{getFullName()}}</span>
</div>
<script>
    new Vue({
        el: '#root',
        data: {
            first_name: 'Kris',
            last_name: 'Wu'
        },
        methods: {
            /*
             * 调用时机
             * 视频（11）中老师是这样回答的，因为 Vue 会监控数据，一旦某个数据变了，
             * 整个模板中但凡用到了某个数据的地方都要重新解析（渲染），
             * 有趣的是 Vue 并不知道你写的函数里有没有用到这个数据，所以它只能再调用一遍！
             * 视频（12）中老师是这样回答的，因为你这里 {{getFullName()}} 带()，
             * 所以重新解析(渲染)的时候就会再执行一遍
             * 我认为两者可以结合起来，因为要重新渲染，Vue 并不知道函数里面是否使用了某个依赖的数据
             * 所以 Vue 会在重新解析的时候，再次调用模板语言中的所有函数
             */
            getFullName() {
                return this.first_name + '-' + this.last_name;
            }
        }
    })
</script>
</body>
</html>

